<template>
	<view :class="[primarySize()]">
		<view class="container flex flex-col">
			<view class="flex-grow-1 flex pt30">
				<scroll-view scroll-y="true" class="left_scroll">
					<view class="left_item m-ellipsis" :class="lindex==index?'active':''" v-for="(item,index) in jobCategories" @click="bindFirstChange(index)">{{item.category_name}}</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="right_scroll">
					<template v-for="(item,index) in jobCategories[lindex].childlist">
						<view class="child_item">{{item.category_name}}</view>
						<view class="pb30">
							<view class="right_item m-ellipsis" :class="cindex==v.id?'active':''"
								v-for="(v,i) in item.childlist" @click="bindSecondChange(index,v.id,i)">{{v.category_name}}
							</view>
						</view>
					</template>
				</scroll-view>
			</view>
			<view class="bg-white ptb10 plr30" @click="bindNextStep()">
				<view class="btn3">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	var validate = require("../../xilu/validate.js");
	const app = getApp();
	export default {
		data() {
			return {
				
				job: {type:1},
				jobCategories: [],
				lindex:0,
				rindex:0,
				cindex: 0,
				dindex:''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		/**
		* 生命周期函数--监听页面加载
		*/
		onLoad: function (options) {
			
		    let page = this;
		    let jobId = options.id;
		    this.$util.getJobCategories().then(categories => {
		      page.jobCategories = categories;
		      if(jobId) {
		        this.$core.get({url:'/xilujob.job_manage/edit/id/'+jobId, success(ret) {
		          let job = ret.data.job;
				  delete job.job_info.id;
		          for(let key in job.job_info) {
		            if(job.job_info.hasOwnProperty(key)) {
		              job[key] = job.job_info[key]
		            }
		          }
		          delete job['job_info'];
		          page.job = job;
				  page.jobCategories.forEach(function(item,index){
					item.childlist.forEach(function(it,ind){
						if(it.id == job.job_category_id){
							page.lindex = index;
							page.rindex = ind;
						}
					})
				  })
		        }});
		      }else {
		        this.$core.get({url:'/xilujob.job_manage/add', success: ret => {
		          page.job = ret.data.job;
		        }});
		      }
		    });
		},
		methods: {
			bindFirstChange(index){
				this.lindex = index;
			},
			bindSecondChange(index, id,i){
				this.rindex = index;
				this.cindex = id;
				this.dindex=i;
				this.job.job_category_id = this.jobCategories[this.lindex].childlist[this.rindex].childlist[this.dindex].id;
				this.$forceUpdate()
			},
			bindNextStep: function () {
			    let data = this.job;
				var rule = [
					{
						name: 'job_category_id',
						rules: ['require','gt:0'],
						errorMsg: {
							require: '请选择职位',
							gt: '请选择职位'
						}
					},
				];
			    if (!validate.check(data, rule)) {
			      uni.showToast({title: validate.getError()[0],icon: 'none'});
			        return;
			    }
				this.job.job_category = this.jobCategories[this.lindex].childlist[this.rindex].childlist[this.dindex];;
			    uni.navigateTo({url: '/pages/company/publish_full_form', success: res => {
			      res.eventChannel.emit("jobTransfer", this.job);
			    }});
			},
		}
	}
</script>

<style lang="scss" scoped>
.container{
	height: 100vh;
	min-height: auto;
}
.search_nav{
	width: 604rpx;
	height: 75rpx;
	background: #FFFFFF;
	border-radius: 40rpx;
	padding: 0 30rpx;
}
	.search_btn{
		line-height: 75rpx;
		color: var(--primary);
		font-size: 28rpx;
	}
	.left_scroll{
		width: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183,189,202,0.05);
		border-radius: 0rpx 15rpx 0 0rpx;
		padding-top: 10rpx;
		height: 100%;
		.left_item{
			width: 200rpx;
			height: 110rpx;
			line-height: 110rpx;
			text-align: center;
			color: #555555;
			font-size: 28rpx;
			padding: 0 10rpx;
			&.active{
				color: var(--primary);
				font-weight: bold;
				background: #F4F8FB;
				position: relative;
			}
			&.active:before{
				content: '';
				width: 9rpx;
				height: 110rpx;
				background: var(--primary);
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
	.right_scroll{
		height: 100%;
		.child_item {
			color: #101010;
			font-size: 32rpx;
			margin-bottom: 30rpx;
			padding-left: 20rpx;
		}
		.right_item{
			display: inline-block;
			vertical-align: top;
			width: 240rpx;
			height: 74rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183,189,202,0.05);
			border-radius: 10rpx;
			margin-top: 20rpx;
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #555555;
			line-height: 74rpx;
			text-align: center;
			padding: 0 5rpx;
			&:nth-of-type(-n+2){margin-top: 0;}
			&.active{
				background: var(--primary);
				color: #FFFFFF;
				border: 1rpx solid var(--primary);
			}
		}
	}
</style>
